<template>
	<view class="postItem" @click="toDetail(props.id)">
		<image class="waterMark" src="@/static/imgs/jyuLogo2.png" />
		<image class="waterMark" mode="aspectFill" style="
        height: 400rpx;
        width: 600rpx;
        left: 0rpx;
        top: 0rpx;
        -webkit-clip-path: polygon(0 0, 0 47%, 100% 0);
        clip-path: polygon(0 0, 0 100%, 100% 0);
      " src="@/static/imgs/pattern6.svg" />

		<view class="header">
			<image src="@/static/imgs/smile.png" class="avater" mode="aspectFill"></image>
			<view>
				<view>{{ props.username }}</view>
				<view style="font-size: 25rpx; color: #c2c5cd">{{ props.date }}</view>
			</view>
			<view class="audit" v-if="props.ifMine">
				<Tag v-if="props.statu==0" type="warn" tag="审核中" />
				<Tag v-if="props.statu==1" type="normal" tag="已通过" />
				<Tag v-if="props.statu==2" type="danger" tag="不通过" />
				<!-- 审核中、不通过 -->
			</view>
			<view class="audit" v-if="props.ifAudit">
				<view class="btn access" @tap.stop="accessPost">
					<van-icon name="success" color="#76c84e" />
				</view>
				<view class="btn disagree" @tap.stop="disagreePost">
					<van-icon name="cross" color="red" />
				</view>
			</view>
		</view>
		<view class="body">
			<span style="white-space: pre-line">{{ props.content }}</span>
			<view> </view>
			<!-- <view class="imgsCon"> -->
			<!-- <image style="imgItem" src="@/static/imgs/jyuLogo2.png" mode="aspectFill"></image> -->
			<!-- </view> -->
		</view>
		<view class="footer">
			<!-- 	<view class="block">
				<van-icon size="50rpx" name="thumb-circle-o" />
				{{props.likeNum}}
			</view> -->
			<view class="block" v-if="!props.ifDetail">
				<van-icon size="50rpx" name="comment-circle-o" />
				{{ props.commentNums }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import Tag from "@/components/Tag.vue";
	import {
		postUpdatePostStatu
	} from '@/apis/apis.js'
	const props = defineProps({
		content: {
			type: String,
			default: "-",
		},
		id: {
			type: Number,
			default: -1,
		},
		statu: {
			type: Number,
			default: 0,
		},
		date: {
			type: String,
			default: "-",
		},
		avaterUrl: {
			type: String,
			default: "",
		},
		username: {
			type: String,
			default: "-",
		},
		likeNum: {
			type: Number,
			default: 0,
		},
		commentNums: {
			type: Number,
			default: 0,
		},
		ifDetail: {
			type: Boolean,
			default: false,
		},
		ifMine: {
			type: Boolean,
			default: false,
		},
		ifAudit: {
			type: Boolean,
			default: false,
		},
	});

	const toDetail = (id) => {
		const temp = JSON.stringify(props);
		if (!props.ifDetail) {
			uni.navigateTo({
				url: `/pages/postDetail/postDetail?id=${id}&props=${temp}`,
			});
		}
	};

	const accessPost = () => {
		uni.showModal({
			content: "确认通过该条帖子的审核吗",
			success: function(res) {
				if (res.confirm) {
					uni.showLoading({
						title: "加载中",
					});
					console.log(props.id, 'xx');
					postUpdatePostStatu({
						id: props.id,
						statu: 1
					}).then((res) => {
						if (res.statu === 200) {
							uni.showToast({
								title: '已通过'
							})
						}
					})
					setTimeout(() => {
						uni.navigateBack();
						uni.hideLoading();
					}, 500);
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	};
</script>

<style lang="less" scoped>
	.postItem {
		// height: 400rpx;
		height: auto;
		min-height: 400rpx;
		width: 750rpx;
		// padding: 15rpx;
		background-color: white;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		overflow: hidden;
		box-sizing: border-box;
		// box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
		// box-shadow: 0px 20px 20px -20px rgba(0, 0, 0, 0.3);
		border: 5rpx solid #e8eaf0;
		position: relative;

		.waterMark {
			height: 300rpx;
			width: 300rpx;
			opacity: 0.3;
			position: absolute;
			right: -60rpx;
			bottom: 0;
		}

		.header {
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 35rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			gap: 15rpx;
			position: relative;
			font-size: 34rpx;

			&:before {
				content: "";
				position: absolute;
				width: 90%;
				height: 4rpx;
				background-color: #f8f8f8;
				opacity: 0.6;
				z-index: 0;
				bottom: -15rpx;
				left: 5%;
			}

			.avater {
				height: 80rpx;
				width: 80rpx;
			}

			.audit {
				position: absolute;
				right: 40rpx;
				top: 20rpx;
				display: inline-flex;
				gap: 20rpx;

				.btn {
					height: 60rpx;
					width: 60rpx;
					border: 2rpx solid beige;
					border-radius: 100%;
					background-color: aqua;
					display: flex;
					justify-content: center;
					align-items: center;

					&.access {
						border: 1rpx #aedf96 solid;
						background-color: #f0f9eb;
					}

					&.disagree {
						border: 1rpx #fab6b6 solid;
						background-color: #fef0f0;
					}
				}
			}
		}

		.body {
			// height: 220rpx;
			height: auto;
			min-height: 220rpx;
			// ?
			max-height: 500rpx;
			width: 100%;
			padding: 40rpx;
			padding-top: 15rpx;
			padding-bottom: 20rpx;
			line-height: 55rpx;
			box-sizing: border-box;

			.imgsCon {
				display: flex;

				.imgItem {
					height: 100rpx;
					width: 100rpx;
				}

				image {
					height: 100rpx;
					width: 100rpx;
				}
			}
		}

		.footer {
			height: 90rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			// justify-content: flex-end;
			padding-bottom: 10rpx;

			.block {
				height: 100%;
				width: 30%;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10rpx;
			}
		}
	}
</style>